
number_pages = 1 //页数
scroll_status = false //是否有数据的状态 false为有数据 true为没有数据

/******		初始化滚动区域	********/
mui('.mui-scroll-wrapper').scroll({
	indicators: false,
	startY: 0 //初始化时滚动至y
});
/********	初始化上拉加载	***********/
mui.init({
	pullRefresh: {
		container: scroll_box, //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
		up: {
			height: 50, //可选.默认50.触发上拉加载拖动距离
			auto: false, //可选,默认false.自动上拉加载一次  一定要禁止不然进入页面之后会直接显示底部内容
			contentrefresh: "正在加载更多商品...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
			contentnomore: '没有更多数据了!', //可选，请求完毕若没有更多数据时显示的提醒内容；
			callback: function get_data() {

				/*******	ajax获取数据	*********/
							      	mui.ajax(`./test_data/goods${number_pages}.json`,{
							      		dataType:'json',//服务器返回json格式数据
							      		type:'get',//HTTP请求类型
							      		timeout:10000,//超时时间设置为10秒；
							      		success:function(data){
				//			      			console.log(data)
							      			html = ''
											mui.each(data,(i,v)=>{
												html += `
												<div>
													<a href="goods_detail.html#${v.id}">
														<div><img src="${v.img_url}" alt="" /></div>
														<aside>
															<h5 class="mui-ellipsis-2">${v.good_name}</h5>
															<p>￥${v.price}</p>
														</aside>
													</a>
												</div>`
											})
							      			$('.goods').append(html)
											
							      			number_pages++
							      		},
							      		error:function(xhr,type,errorThrown){
							      			if(xhr.status!=200){
							      				scroll_status=true
							      			}
							      		}
							      	});

				this.endPullupToRefresh(scroll_status); //是否有数据
			} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		}
	}
})

/********	swiper 轮播图插件	********/
var swiper = new Swiper('.swiper-container', {
	spaceBetween: 10,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
	autoplay: {
		delay: 2500,
		disableOnInteraction: false,
	},
});
swiper.init()

/************	返回顶部	***************/
var scroll = mui('#scroll_box').scroll()
$('#scroll_box').on('scroll', function(e) {
	if(scroll.y < -200) {
		$('#backTop').fadeIn()
	} else {
		$('#backTop').fadeOut()
	}
})
$('#backTop').click(function() {
	mui('#scroll_box').pullRefresh().scrollTo(0, 0, 330);
	$('#backTop').fadeOut()
})

/*******	通知滑动	**********/
let li_num = 40
let li_len = $('.notice ul li').length
setInterval(()=>{
	let li_height = $('.notice ul li').height()
	if(li_num==li_len*li_height){
		$('.notice ul').css('top','0px')
		li_num=0
	}
	$('.notice ul').animate({'top':`-${li_num}px`},500)
	li_num += li_height
},3000)

/*********** 秒杀倒计时 *************/

let time = new Countdown([4, 8, 12, 16,20,24])//这是整点秒杀时间 每隔4个小时刷新一次
let hour = time.comparison()	//获取应该秒杀第几小时的时间
/******获取整点的数据******/
let get_data = hour=>{
	$.ajax({
		type:"get",
		url:`./test_data/countdown_data${hour}.json`,
		async:true,
		success(data){
			html = ''
			$.each(data,(i,v)=>{
				if(i<4){
					html += `
							<div>
				    			<a href="goods_detail.html#${v.id}">
				    				<div><img src="${v.img_url}" alt="" /></div>
				    				<aside>
				    					<h5 class="mui-ellipsis-2">${v.good_name}</h5>
				    					<p>￥${v.new_price}</p>
				    					<s>￥${v.price}</s>
				    				</aside>
				    			</a>
				    		</div>`
				}
			})
			$('.spike section').empty().append(html)
		},
		error(err){
			console.log(err.statusText)
		}
	});
}
get_data(hour)
setInterval(() => {
	let date = time.get()
	$('#h').html(date.h)
	$('#m').html(date.m)
	$('#s').html(date.s)
	let new_hour = time.comparison()
	if(hour != new_hour){
		hour = new_hour
		get_data(hour)
	}
}, 500);

/*****	   搜索	*******/

//遮罩层
var mask = mui.createMask(close_status)//()为用户点击蒙版时自动执行的回调；

$('input[type="search"]').focus(()=>{
	$('.header-top  a').hide()
	$('.header-top .header_right button').show()
	$('.header-top .header_left span').show()
	mask.show()
})

$('.header-top .mui-pull-left').click(()=>{
	close_status()
})

function close_status(){
	$('.header-top  a').show()
	$('.header-top .header_right button').hide()
	$('.header-top .header_left span').hide()
	$('.mui-backdrop').hide()
}
$('#submit').click(()=>{
	$('#search').submit()
})





